import {
	Component
} from 'react';
import {
	Tab,
	Button,
	ScrollList,
	Group,
	Boxs,
	Avatar,
	Badge,
	Popup,
	Dialog,
	Toast,
	SearchBar
} from 'saltui';
const {
	IconButton,
	ButtonGroup
} = Button;
const {
	HBox,
	Box,
	VBox
} = Boxs;

import {
	urlPrefix,
	URLS,
	nodataIcon,
	dictMap
} from '../../../app/variables';
import AngleRight from 'salt-icon/lib/AngleRight';
import DB from '../../../app/db';
import PostPageItem from 'components/post_page_item';

let tabPage = '0';
let typePost = {};
export default class PageHome extends Component {

	constructor(props) {
		super(props);
		var hasBottomTab =  document.getElementById("hasBottomTab").value;
		let winHeight = getScrollHigh(1, 1, 0);
		var context = document.getElementById("context").value;
		this.state = {
			winHeight: winHeight,
			addClickAble:false,
			activeTabIndex:tabPage,
			search: {title:''},
			typePost:typePost,
			typeArrow:true,
			visible:false,
			isConfirm:false,
			urlPrev: context + '/api/m/plugin/attachment/mobile/viewImage?fid=',
			noDataTip:"暂无数据"
		}

		dd.biz.navigation.setTitle({
      		title: "我的帖子",
		    onSuccess: function (result) {
		    },
     		 onFail: function () {
      		}
    		});

		this.searchBarProps = {
			placeholder: "请输入标题",
			instantSearch: false,
			hasHistory: false,
			searchDelay: 450,
			exitAfterEnter: false,
			onEnter: () => {
			},
			onExit: this.onExit.bind(this),
			onChange: (value) => {
			},
			onSearch: this.onSearch.bind(this)
		};
		this.postTypeRedio = [
	      {
	        value: '1',
	        text: '审核中',
	      },
	      {
	        value: '2',
	        text: '审核通过',
	      },
	      {
	        value: '3',
	        text: '审核不通过',
	      },
	      {
	        value: '4',
	        text: '无需审核',
	      },
	    ];

}

	/*componentWillMount() {
		this.getPhoto();
	}*/
	componentDidMount() {
		window.scrollTo(0,0);
		//获取首页信息
		let t = this;
		t.searchBarLimit('30');
	}

	searchBarLimit(len){
		$(".t-search-bar-input").attr('maxlength',len);
	}

	/**
	 * tab页切换方法
	 * @param obj
	 */
	handleTabChange(obj) {
		var t = this;
		var active = obj;
		tabPage = obj;
		this.setState({
			activeTabIndex: active,
			search: {title:''},
		},()=>{
		//搜索字数限制
		t.searchBarLimit('30');
		});
	}

	beforeFetch(data, form) {
		this.setState({
			addClickAble:false,
		});
		data.type = this.state.activeTabIndex;
		var typePost = this.state.typePost;
		if(!$.isEmptyObject(typePost)){
			data.checkStatus = typePost.value;
		}
		data.title=this.state.search.title;
		return data;
	}

	onExit() {
		this.onSearch1("");	
	}

	onSearch1(value) {
		let param = this.state.search;
		param.title=value;
		this.flushData(param,tabPage);
		this.setState({
			noDataTip:"暂无数据"
		});
	}


	onSearch(value) {
		this.setState({
			noDataTip:"无搜索结果"
		});
		let param = this.state.search;
		param.title=value;
    	this.flushData(param,tabPage);
	}

	onRefresh(value) {
		let param = this.state.search;
		param.title=value;
		this.flushData(param,tabPage);
		
		//搜索字数限制
		this.searchBarLimit('30');
		/*if (this.state.search) {
			let search = {};
			search['\'CN_title\''] = value;
			this.flushData({
				search
			});
		}*/
	}

	flushData(param, index) {
		let swap_index = index ? index : this.state.activeTabIndex;
		if (swap_index == '0') {
			this.flushPostData(param);
		} else if (swap_index == '1') {
			this.flushReplyData(param);
		}
		this.searchBarLimit('30');
	}

	flushPostData(param) {
		this.refs.forum_my_post_ref.fetchData(param);
		this.searchBarLimit('30');
	}

	flushReplyData(param) {
		this.refs.forum_my_reply_ref.fetchData(param);
		this.searchBarLimit('30');
	}

	changeClickAble(){
		this.setState({
			addClickAble:true,
		});
	}

	processData(data) {
		this.setState({
			addClickAble:true,
		});
		return data;
	}

	changeArrow(field){
	    let t = this;
	    let status = t.state[field];
	    t.setState({
	      [field]:!status
	    })
	}

	handleChangeSelect(value,key) {
	    let values = this.state[key];
	    if(values.value == value.value){
	      value = {};
	    }
	    this.setState({
	      [key]:value,
	    });
	}
	/*重置*/
	reset(){
    this.setState({
      typePost:{},
      isConfirm:false
    },()=>{
      var param={};
    if (tabPage == '0') {
      this.refs.forum_my_post_ref.fetchData(param);
    }
    });
  }
  /*确定*/
  conditionSearch(){
    var param={};
    if (tabPage == '0') {
      this.refs.forum_my_post_ref.fetchData(param);
    }
    this.setState({
      isConfirm:true
    });
  }


	render() {
		var url=this.state.urlPrev;
		var token = document.getElementById("token").value;
		var imgUrl = '';
		if(this.state.image != null && this.state.image != '' && this.state.image != 'null'){
			imgUrl = url + this.state.image+'&token='+token;
		}
		let winHeightStyle = {
			height:this.state.winHeight
		};
		return (
		<div>
		{/* 	<Tab activeKey={this.state.activeTabIndex} onTabClick={this.handleTabChange.bind(this)} destroyInactiveTabPane={true}>
				  <Tab.Item key="0" title={"我发表的"}> */}
					<VBox className="dd-bottom-border">
							<HBox className="t-BCf" vAlign="center">
								<Box flex={1}><SearchBar ref="search_forum_my_post_ref" {...this.searchBarProps} /></Box>
								<Box className="t-FCddblue" onClick={() => { 
									this.setState({ visible: true });
									var top = $(window).scrollTop();
									$('#App').css("top",-top+"px");
									$('#App').css("width",100+"%");
									$('#App').css('position','fixed');
									}}>
									<i className="iconfont icon-filter t-FS18 t-FCblue t-LH44 t-PR10"></i>
								</Box>
							</HBox>
					</VBox>
					<div style={winHeightStyle}>
							<ScrollList
								className=""
								url={URLS.queryMyPost}
								dataType="json"
								pageSize={10}
								beforeFetch={this.beforeFetch.bind(this)}
								processData={this.processData.bind(this)}
								onRefresh={this.onRefresh.bind(this)}
								ref = 'forum_my_post_ref'
								noDataImage={nodataIcon}
								noDataTip={this.state.noDataTip}
								currentPageKey="page"
						>
								<PostPageItem pagetype="mypost" addClickAble={this.state.addClickAble} changeClickAble={this.changeClickAble.bind(this)} isShowCount={true} flushData={this.flushPostData.bind(this)} />
						</ScrollList>
					</div>
				{/* </Tab.Item> */}
				{/* <Tab.Item key="1" title={"我回复的"}><SearchBar ref="search_forum_my_reply_ref" {...this.searchBarProps} />
						<div style={winHeightStyle}>
						<ScrollList
							className=""
							url={URLS.queryMyReplyPost}
							dataType="json"
							pageSize={10}
							beforeFetch={this.beforeFetch.bind(this)}
							processData={this.processData.bind(this)}
							onRefresh={this.onRefresh.bind(this)}
							ref = 'forum_my_reply_ref'
							noDataImage={nodataIcon}
							noDataTip={this.state.noDataTip}
							currentPageKey="page">
							<PostPageItem pagetype="myreply" addClickAble={this.state.addClickAble} changeClickAble={this.changeClickAble.bind(this)} isShowCount={false} flushData={this.flushReplyData.bind(this)} />
						</ScrollList>
						</div>
		 		</Tab.Item> */}
		 		{/* </Tab> */}
		 		<Popup
				content={
						<div style={{height:'100vh'}}>
						<div className="dd-popup-mail-right" style={{width:"280px",paddingTop:0,height:"calc(100% - 80px)",overflowY:"auto"}}>
							<HBox vAlign="center"
										className={!this.state.typeArrow?"t-P16 t-PT14 t-PB0 t-FS16 t-MT4":"dd-bottom-border t-P16 t-PT14 t-PB0 t-FS16 t-MT4"}
										onClick={this.changeArrow.bind(this,"typeArrow")}>
								<Box flex={1} className="t-FC3">任务类型</Box>
								<Box><i className={this.state.typeArrow?"iconfont icon-arrow-down t-FCddblue":"iconfont icon-arrow-up t-FCddblue"} ></i></Box>
							</HBox>
							<HBox className={!this.state.typeArrow?"t-FAC t-P12 t-PB6 t-PT6 t-fw dd-bottom-border":"t-DN"}>
								{this.postTypeRedio.map((item,key)=>(
										<Box className={this.state.typePost.value == item.value?"t-BCddblue-20 t-FCddblue t-PL16 t-PR16 t-LH44 t-H44 t-M4 t-calc50-8 t-R4 t-omit":"t-BCf7 t-PL16 t-PR16 t-LH44 t-H44 t-M4 t-calc50-8 t-R4 t-omit"} 
										onClick={()=>{
											this.handleChangeSelect(item,"typePost");
										}}>
										{item.text}
										</Box>
									))
								}
							</HBox>
							<div className="t-PF" style={{bottom:"0",width:"100%"}}>
							<ButtonGroup onClick={() => {Popup.hide();}}>
								<Button type="secondary" display="inline" onClick={() => { this.reset() }}>重置</Button>
								<Button type="primary" display="inline" onClick={() => {this.setState({ visible: false }); 
								        this.conditionSearch();$("#App").removeAttr("style");$(document).scrollTop($(window).scrollTop());}}>确定</Button>
							</ButtonGroup>
							</div>
						</div>
						</div>
				}
				animationType="slide-left"
				onMaskClick={() => {
						if(this.state.isConfirm){}
						else{this.reset();}
						this.setState({ visible: false });
						$("#App").removeAttr("style");
						$(document).scrollTop($(window).scrollTop());
				}}
				visible={this.state.visible}>
				{null}
				</Popup>
    </div>
		);
	}
}